<template>
  <div class="home-bg padding-20">
    <WorkTableEvent></WorkTableEvent>
    <div>
      <div class="flex justify-end padding-top-20"><ActButtons></ActButtons></div>
    </div>

    <!-- echarts展示 -->
    <div class="margin-top-bottom-20 flex">
      <div class="satae-box chart-box">
        <manage-satae pageType="group" ref="manage"></manage-satae>
      </div>
      <div class="split-line"></div>
      <div class="flex-1 chart-box">
        <lease-group-state ref="lease"></lease-group-state>
      </div>
      <div class="split-line"></div>
      <div class="flex-1 chart-box">
        <capture-group-state ref="capture"></capture-group-state>
      </div>
    </div>

    <div class="tab-self-box padding-top-20 padding-left-right-20 bg-color-fffff">
      <template v-for="item in tabList">
        <span :key="item.primaryKey" class="font-size-18 tab-txt cursor-pointer padding-right-50" :class="activeName == item.primaryKey ? 'active-tab-color' : ''" @click="tabClick(item.primaryKey)">{{ item.packageName }}</span>
      </template>
      <div class="date-box">
        <el-date-picker size="mini" :clearable="false" v-model="searchValue" type="year" placeholder="请选择" @change="getPackageList(1)"> </el-date-picker>
      </div>
      <el-button class="add-button" type="primary" size="mini" @click="onClickAdd"> 发起计划编制 </el-button>
    </div>
    <div class="group-operation-box bg-color-fffff">
      <data-list :tableData.sync="tableData" ref="dataList" @updateList="updateList"></data-list>
      <div style="margin-top: 20px; display: flex; justify-content: flex-end" type="flex" justify="end" v-if="queryParams.total">
        <el-pagination background layout="total, prev, pager, next" @current-change="getPackageList" :current-page="queryParams.currentPage" :page-size="queryParams.pageSize" :total="queryParams.total"> </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs';
import dataList from './components/dataList';
import WorkTableEvent from '@/pages/businessAssets/modeules/workTableEvent';
import captureGroupState from '@c/homeChart/captureGroupState.vue';
import LeaseGroupState from '@c/homeChart/leaseGroupState.vue';
import ManageSatae from '@c/homeChart/manageSatae.vue';
import ActButtons from '@/pages/businessAssets/modeules/actButtons';
import Api from '../../api/incomeAndExpenditurePlan';
export default {
  data() {
    return {
      activeName: null,
      searchValue: new Date(),
      tabList: [],
      queryParams: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      tableData: [],
    };
  },
  mounted() {
    this.getTabList();
  },
  methods: {
    async getTabList() {
      let res = await Api.apiBasicPackageResourceList();
      if (res && res.success && res.rows.length > 0) {
        this.tabList = res.rows;
        this.activeName = this.tabList[0].primaryKey ? this.tabList[0].primaryKey : null;
        this.getPackageList();
      }
    },
    async getPackageList(currentPage = 1) {
      // packageKey = packageKey ? packageKey : this.tabList[0].primaryKey;
      this.queryParams.currentPage = currentPage || this.queryParams.currentPage;

      let res = await Api.apiBasicPackageList({
        year: this.searchValue,
        packageKey: this.activeName,
        currentPage: this.queryParams.currentPage,
        pageSize: this.queryParams.pageSize,
      });
      if (res && res.success) {
        this.tableData = res.rows || [];
        this.queryParams.total = parseInt(res.total);
      }
    },
    tabClick(key) {
      this.activeName = key;
      this.getPackageList(1);
    },
    onClickAdd() {
      this.$refs.dataList.editItem();
    },
    updateList() {
      this.getPackageList();
    },
  },
  components: {
    dataList,
    WorkTableEvent,
    ActButtons,
    ManageSatae,
    captureGroupState,
    LeaseGroupState,
  },
};
</script>
<style lang="scss">
.tab-menu-box {
  position: sticky;
  z-index: 100;
  height: 44px;
  padding: 0 30px;
  border-bottom: 1px solid #e5e5e5;
  margin-top: 6px;
  .tab-box {
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: unset !important;
    height: 44px;
    box-sizing: border-box;
    overflow: hidden;
    padding-top: 0;
    .el-tabs {
      flex: 1;

      .el-tabs__header {
        margin-bottom: 0;
      }
    }
  }
  .tab-right-box {
    display: flex;
    align-items: center;
    height: 40px !important;
    padding: 5px 0;
    .button-box {
      .el-button {
        margin-left: 10px;
      }

      .is-round {
        border-radius: 17px;
        min-width: 80px;
      }
    }

    .time-select {
      margin: 0 !important;
      width: 200px;
      margin-left: 15px;
    }
  }
}
.tab-self-box {
  height: 55px;
}
.date-box {
  position: absolute;
  width: 200px;
  top: 15px;
  right: 145px;
}
.add-button {
  position: absolute;
  top: 14px;
  font-size: 14px;
  right: 10px;
}
.satae-box {
  width: 400px;
}
.split-line {
  width: 20px;
  background: #f8f8f8;
}
.chart-box {
  height: 500px;
}
</style>
